<template>
  <div class="container">
    <div class="top">
      <img
        src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978468241.png?imageView2/2/format/webp"
      />
      <p>
        <span class="title">距结束还剩:</span>
        <span>活动结束</span>
      </p>
    </div>
    <van-tabs v-model:active="active" @click="changeSlideArr">
      <van-tab v-for="(item, index) in tabArr" :key="index">
        <template #title>
          <p class="tabTitle">{{ item.time }}</p>
          <p class="tabTitle">{{ item.title }}</p>
        </template>
      </van-tab>
    </van-tabs>
    <div class="swiper-outer">
      <swiper slidesPerView="auto">
        <swiper-slide v-for="(item, index) in cargoArr" :key="index">
          <img class="img" :src="item.imgSrc" />
          <img
            class="icon"
            src="https://x.dscmall.cn/static/dist/img/seckill-tag.png"
          />
          <div class="text">
            <p class="title">
              {{ item.title }}
            </p>
            <p class="price">
              <small>￥</small>
              {{ item.price }}
            </p>
            <p class="oldPrice">
              {{ item.oldPrice }}
            </p>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <p class="bottom">
      <a href="https://x.dscmall.cn/static/dist/#/seckill">
        查看更多秒杀商品
        <i>icon</i>
      </a>
    </p>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.less";
import "swiper/components/pagination/pagination.min.css";
import axiossecond from "../../common/axiossecond";
import { ref, onMounted, computed, watch } from "vue";
export default {
  components: { Swiper, SwiperSlide },
  setup() {
    const tabArr = ref([
      {
        time: "00:00",
        title: "抢购中",
      },
      {
        time: "00:00",
        title: "即将开始",
      },
      {
        time: "00:00",
        title: "即将开始",
      },
      {
        time: "00:00",
        title: "即将开始",
      },
    ]);
    const active = 0;
    const changeSlideArr = function (index) {};

    let seckillList = ref(null);
    function getSeckillList(str, obj = null) {
      axiossecond[str]("/api/visual/visual_seckill", obj)
        .then((res) => {
          seckillList.value = res.data.data;
        })
        .catch((err) => {
          console.log("seckillList获取出错");
        });
    }
    let cargoArr = ref([]);
    onMounted(getSeckillList.bind(this, "get"));
    watch(seckillList, (newValue) => {
      if (seckillList.value !== null) {
        newValue.time_list.forEach((element, index) => {
          tabArr.value[index].time = element.title;
        });
        newValue.seckill_list.forEach((element, index) => {
          const obj = {};
          obj.id = element.id;
          obj.title = element.goods_name;
          obj.imgSrc = element.goods_thumb;
          obj.oldPrice = element.market_price;
          obj.price = element.sec_price;
          obj.url = element.url;
          cargoArr.value[index] = obj;
        });
      }
    });
    return {
      tabArr,
      active,
      changeSlideArr,
      seckillList,
      cargoArr,
    };
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
}
.container {
  border-radius: 1rem;
  background-color: #fff;
  margin: 1rem 1rem 0;
  .top {
    padding: 2.2rem 1rem 1.2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
      width: 10rem;
    }
    p {
      .title {
        margin-right: 0.8rem;
      }
      span {
        font-size: 1.3rem;
        color: #333;
      }
    }
  }
  /deep/ .van-tab {
    padding-bottom: 0.8rem;
    .van-tab__text {
      display: block;
      .tabTitle {
        width: 100%;
        text-align: center;
      }
    }
  }
  /deep/ .van-tabs__line {
    width: 8rem;
    height: 2px;
  }
  .swiper-outer {
    padding: 1rem 0 1rem 1rem;
    position: relative;
    max-width: 640px;
    /deep/ .swiper-container {
      width: 100%;
      .swiper-slide {
        text-align: center;
        width: 30%;
        .img {
          width: 100%;
        }
        .icon {
          width: 5rem;
          position: absolute;
          top: 0;
          left: 0;
        }
        .text {
          padding: 1rem 0.5rem;
          .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 1.3rem;
          }
          .price {
            color: rgb(242, 14, 40);
            margin-top: 6px;
            font-size: 15px;
            font-weight: 700;
          }
          .oldPrice {
            margin-top: 2px;
            font-size: 10.5px;
            color: rgb(136, 136, 136);
            text-decoration: line-through;
          }
        }
      }
    }
  }

  .bottom {
    padding-bottom: 2rem;
    text-align: center;
    a {
      color: #232326;
      text-decoration: none;
      font-size: 1.4rem;
      font-weight: bold;
    }
  }
}
</style>
